<!-- 查询酒店，列表渲染 -->
<template>
  <div class="hotelCards">
    <el-row
      style="
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap-reverse;
      "
    >
      <el-col :span="8" v-for="l in list" :key="l.hotels.hotelId"
        ><div :style="cardstyle">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="height: 300px">
              <img
                :src="l.pictures.picLink"
                class="image"
                style="width: 100%; height: 100%"
              />
            </div>
            <!-- 详细信息 -->
            <div style="padding: 14px">
              <!-- <span>{{ l.hotels.hotelName }}</span> -->
              <el-descriptions :title="l.hotels.hotelName" size="medium" column=2>
                <el-descriptions-item label="地址">{{
                  l.hotels.hotelAddr
                }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{
                  l.hotels.hotelTelephone
                }}</el-descriptions-item>
                <el-descriptions-item label="标签">
                  <el-tag size="small">{{ l.hotels.hotelLabel }}酒店</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <!-- 评分与进入详情页按钮 -->
              <div class="bottom clearfix">
                <el-rate
                  v-model="l.hotels.overallRating"
                  disabled
                  show-score
                  text-color="#ff9900"
                >
                </el-rate>
                <div style="display: flex; float: right; margin-bottom: 10px">
                  <p
                    style="
                      color: red;
                      align-self: center;
                      font-weight: bold;
                      font-size: 20px;
                      margin-right: 20px;
                    "
                  >
                    {{ l.hotels.hotelPrice }}
                  </p>
                  <el-button type="primary" round @click="go(l.hotels.hotelId)" size="medium "
                    >查看详情</el-button
                  >
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "hotelcards",
  data() {
    return {
      //父组件传值声明
      props: {
        formInline: Object,
        cardlist: Object,
      },
      //请求参数
      pageDto: {
        page: 1,
        size: 50,
        hotels: { hotelName: "", city: "" },
      },
      //返回结果集
      list: [],
      //卡片默认样式
      cardstyle: {
        width: "75%",
        marginBottom: "20px",
      },
    };
  },
  methods: {
    //设置请求参数(搜索框、列表)
    setParams() {
      // 搜索框/导航/结果页
      if (this.$attrs.formInline) {
        this.pageDto.hotels.hotelName = this.$attrs.formInline.name;
        this.pageDto.hotels.city = this.$attrs.formInline.city;
      } 
      // 首页卡片列表
      else {
        this.pageDto.page = this.$attrs.cardlist.page;
        this.pageDto.size = this.$attrs.cardlist.size;
        this.pageDto.hotels.hotelName = this.$attrs.cardlist.name;
        this.pageDto.hotels.city = this.$attrs.cardlist.city;
        this.cardstyle = this.$attrs.cardlist.cardstyle;
        console.log(this.pageDto);
        console.log(this.cardstyle);
      }
    },
    //请求酒店列表
    queryByPage() {
      this.$api.hotelsApi.queryByPage(this.pageDto).then((res) => {
        if (res.data.code == 0) {
          this.$emit("has-data", []);
        } else this.list = res.data.data;
        console.log("hotels");
        console.log(this.list);
      });
    },
    // 跳转详情页
    go(id) {
      console.log(id);
      this.$router.push({name:'hoteldetail',params:{id:id}})
      // console.log(this.$router);
    },
  },
  mounted() {
    // console.log(this.$attrs.formInline);
    this.setParams();
    this.queryByPage();
  },
};
</script>

<style scoped>
/* element ui card */
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* 自定义 */
.hotelCards {
  font-family: serif;
}
</style>
